<template>
<div>
  {{aliasName}}<br>
  {{getName}}
</div>
</template>

<script>

import {mapState} from "vuex/dist/vuex.mjs";
import {mapGetters} from "vuex/dist/vuex.mjs";
import {mapMutations} from "vuex/dist/vuex.mjs";
import {mapActions} from "vuex/dist/vuex.mjs";

export default {
  name: "StoreDemo"
  ,data(){
    return {

    }
  }
  ,methods:{
    ...mapMutations(['setName'])
    ,...mapActions(['setNameAction'])
  }
  ,computed:{
    //推荐方式
    ...mapState(['name'])
    //取别名
    ,...mapState({aliasName:'name'})
    //修饰读，如果放到计算属性中就是一个计算属性，有缓存
    //如果放到method中，那么就是一个方法，没有缓存
    ,...mapGetters({getName:'getName'})
  }
  ,async mounted() {
    this.setName({name:'zzy'})
    await this.$store.dispatch('setNameAction',{name:'rrr'})
    await this.setNameAction({name:'ttt'})
  }
}
</script>

<style scoped>

</style>